<template>
  <div class="find">
    <van-nav-bar>
      <template #title>
        <h3>
          发现
        </h3>
      </template>
    </van-nav-bar>
    <!-- 添加下拉刷新功能 -->
    <van-pull-refresh v-model="isloading" @refresh="onRefresh">
      <div class="skill">
        <morecell title="面试技巧" />
        <div class="items">
          <!-- 将技巧列表的元素传给子组件 -->
          <skill
            :item="item"
            v-for="(item, index) in skillList"
            :key="index"
          ></skill>
        </div>
      </div>
      <div class="marketData">
        <morecell title="市场数据" path="/chart" />
        <div class="tag">
          <span class="city">{{ city }}</span>
          <span class="position">{{ position }}</span>
        </div>
        <div class="data">
          <div
            class="item"
            v-for="(item, index) in showMarketList"
            :key="index"
          >
            <div class="year">{{ item.year.substr(0, 5) }}</div>
            <div class="outer">
              <div
                class="inner"
                :style="{
                  width: Math.round((item.salary / topSalary) * 100) + '%'
                }"
              >
                ￥{{ item.salary }}
              </div>
            </div>
            <div class="percent">
              <i
                v-if="item.percent < 0"
                class="iconfont iconicon_xiajiang"
                style="color:#fe6d67"
              ></i>
              <i
                v-else
                class="iconfont iconicon_shangsheng"
                style="color:#00d47a"
              ></i>
              <span>{{ item.percent }}%</span>
            </div>
          </div>
        </div>
        <div class="more" v-if="showMarketList.length === 4" @click="open">
          展开更多<i class="iconfont iconicon_zhankai"></i>
        </div>
        <div class="less" v-else @click="close">
          收起更多<i class="iconfont iconicon_zhankai"></i>
        </div>
      </div>
      <div class="share">
        <morecell title="面经分享" path="/shareList"></morecell>
        <share
          :item="item"
          v-for="(item, index) in shareList"
          :key="index"
        ></share>
      </div>
      <div class="footer">
        --------到底了--------
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
// 导入子组件
import morecell from './morecell'
import skill from './skill'
import share from './share'
// 导入网络请求的方法
import {
  getSkillApi,
  getMarketListApi,
  getShareApi
} from '../../../api/find.js'
export default {
  name: 'find',
  components: {
    morecell,
    skill,
    share
  },
  data () {
    return {
      skillList: [],
      marketList: [],
      city: '' /* 城市 */,
      position: '' /* 职位 */,
      topSalary: 0 /* 市场数据中最高的薪资 */,
      showMarketList: [] /* 展示的市场数据 */,
      shareList: [],
      // 表示加载状态
      isloading: false
    }
  },
  created () {
    this.getSkillList()
    this.getMarketData()
    this.getShareList()
  },
  activated () {
    // 切换回被缓存的页面时，滚动条应该在之前离开的位置，而不是顶部
    window.scrollTo(0, this.$route.meta.scroll)
  },
  methods: {
    // 获取面试技巧数据
    async getSkillList () {
      const res = await getSkillApi({
        limit: 3
      })
      this.skillList = res.data.list
    },
    // 获取市场数据
    async getMarketData () {
      const res = await getMarketListApi()
      this.city = res.data.city
      this.position = res.data.position
      this.topSalary = res.data.topSalary
      this.marketList = res.data.yearSalary.reverse()
      // 一开始默认展示四条数据
      this.showMarketList = this.marketList.slice(0, 4)
    },
    // 展开数据被点击
    open () {
      this.showMarketList = this.marketList
    },
    // 收起数据被点击
    close () {
      this.showMarketList = this.marketList.slice(0, 4)
    },
    // 获取面经分享数据
    async getShareList () {
      const res = await getShareApi({
        limit: 3
      })
      this.shareList = res.data.list
    },
    // 下拉操作
    onRefresh () {
      // 刷新的时候重新获取数据
      this.getSkillList()
      this.getMarketData()
      this.getShareList()
      // 获取数据后将加载的状态改为false
      this.isloading = false
    }
  }
}
</script>
<style lang="less" scoped>
.find {
  background-color: #f7f4f5;
  padding-bottom: 50px;
  .skill {
    margin-top: 3px;
    background-color: #fff;
    .items {
      padding: 0 15px;
    }
  }
  .marketData {
    margin: 10px 0;
    background-color: #fff;

    .tag {
      padding: 0 15px;
      font-size: 14px;
      color: #545671;
      margin-top: 15px;
      .city {
        display: inline-block;
        padding: 6px;
        margin-right: 10px;
        background-color: #eceaea;
        border-radius: 4px;
      }
      .position {
        display: inline-block;
        padding: 6px;
        border-radius: 4px;
        background-color: #eceaea;
      }
    }
    .data {
      padding: 0 15px;
      font-size: 14px;
      color: #545671;
      .item {
        display: flex;
        margin-top: 20px;
        .year {
          width: 50px;
          margin-right: 10px;
        }
        .outer {
          flex: 1;
          background-color: #ebdfdf;
          border-radius: 4px;
          font-size: 12px;
          height: 14px;
          .inner {
            background-color: #fe6d67;
            color: #fff;
            border-radius: 4px;
            line-height: 16px;
            text-align: right;
            padding-right: 6px;
            height: 100%;
          }
        }
        .percent {
          width: 50px;
          margin-left: 10px;
          .iconfont {
            font-size: 14px;
          }
        }
      }
    }
    .more {
      font-size: 14px;
      color: #545671;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      .iconfont {
        font-size: 12px;
        margin: 0 5px;
        color: #ccc;
      }
    }
    .less {
      font-size: 14px;
      color: #545671;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 0;
      .iconfont {
        font-size: 12px;
        transform: rotate(180deg);
        margin: 0 5px;
        color: #ccc;
      }
    }
  }
  .footer {
    font-size: 14px;
    color: #b4b4bd;
    text-align: center;
    padding: 25px 0;
  }
}
</style>
